<template>
  <div id="popup-menu" class="menu-list-container" :style="{top: y + 'px', left: x + 'px'}">
    <div v-show="show" v-clickoutside="handleClose" class="popup-menu">
      <ul class="menu-list">
        <li class="menu-item" @mouseenter="() => showSecondary = true" @mouseleave="() => showSecondary = false">
          <svg-icon icon-class="copy_document" class-name="mr-2" />
          <span class="text">
            Duplicate to
          </span>
          <i class="el-icon-arrow-right" />
        </li>
      </ul>
    </div>
    <div v-show="showSecondary" class="popup-menu popup-menu-secondary" @mouseenter="() => showSecondary = true" @mouseleave="() => showSecondary = false">
      <ul class="menu-list">
        <li v-for="table in $tableList" :key="table.id" class="menu-item" @click="() => handleCopy(table.id)">
          <span class="text">{{ table.name }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import Clickoutside from '@/directives/clickoutside'

export default {
  directives: { Clickoutside },
  props: {
    x: {
      type: Number,
      required: true
    },
    y: {
      type: Number,
      required: true
    },
    id: {
      type: String,
      required: true
    },
    tableList: {
      type: Array
    },
    // 参数的类型，引用类型不能复制到其他表格
    parameterType: {
      type: Number
    }
  },
  data() {
    return {
      show: true,
      showSecondary: false
    }
  },
  computed: {
    $tableList() {
      if (this.parameterType === 5) {
        return this.tableList.filter(o => o.name === 'Profile')
      }
      return this.tableList.filter(o => o.tableType !== 3)
    }
  },
  methods: {
    handleClose() {
      this.show = false
    },
    handleCopy(tableId) {
      this.$emit('copy', tableId)
      this.handleClose()
    },
    handleDelete() {
      console.log('delete')
      this.$emit('delete')
      this.handleClose()
    }
  }
}
</script>

<style lang="scss" scoped>
.menu-list-container {
  position: absolute;
}
.popup-menu {
  border-radius: 8px;
  position: absolute;
  padding: 8px;
  background-color: #ffffff;
  box-shadow: 0 4px 17px 6px rgba(0,0,0,.1);
  width: 260px;

  .menu-list {
    .menu-item {
      cursor: pointer;
      border-radius: 4px;
      display: flex;
      align-items: center;
      height: 30px;
      line-height: 30px;
      font-size: 14px;
      padding: 4px 8px;
      &:hover {
        color: #323338;
        background-color: #dcdfec;
      }
      .text {
        flex: 1;

      }
      svg {
        margin-right: 8px;
      }
    }
  }
}

.popup-menu-secondary {
  position: absolute;
  margin-left: -8px;
  transform: translate(100%, 0);
}
</style>
